<template>
  <view class="container">
    <ve-card :title="form.costType == 1 ? '报销费用' : '支出费用'" type="none" fold>
      <template #status>
        <view class="status-2">线下</view>
        <view class="status-3">付款</view>
      </template>
      <view>
        <ve-cell-val label="支出单号" :value="form.code" />
        <ve-cell-val label="支出单类型" :value="form.costTypeName" />
        <ve-cell-val label="费用产生门店" :value="form.feeOrgName" />
        <ve-cell label="关联工单号">
          <view v-if="form.workTypeName || form.workCode">
            <view>{{ form.workTypeName }}</view>
            <view style="color: #3072f6">{{ form.workCode }}</view>
          </view>
          <text v-else>-</text>
        </ve-cell>
        <ve-cell label="关联业务单号">
          <view v-if="form.businessTypeName || form.businessCode">
            <view>{{ form.businessTypeName }}</view>
            <view style="color: #3072f6">{{ form.businessCode }}</view>
          </view>
          <text v-else>-</text>
        </ve-cell>
        <ve-cell-val label="收款方" :value="form.customerName" />
        <ve-cell-val label="收款方式" :value="form.collectInExpWayName" />
        <ve-cell-val label="账号" :value="form.collectCard" />
        <ve-cell-val label="开户行" v-if="form.collectInExpWay == 1" :value="form.collectBackName" />
      </view>

      <FeeTable :data="form" mode="confirm"></FeeTable>
      <ve-gap size="24" />
    </ve-card>
    <!-- 表单 -->
    <ve-form ref="veFormRef" :model="form" :rules="rules">
      <ve-card>
        <ve-form-item label="付款时间" required prop="payTime">
          <ve-date-picker v-model="form.payTime" title="时间" :params="datetimeparams"></ve-date-picker>
        </ve-form-item>
        <ve-form-item label="付款方式" required prop="payWay">
          <ve-picker-inline
            v-model="form.payWay"
            placeholder="请选择"
            :range="paywayEnum"
            unit="arrowRight"
            @change="typeChange"
          ></ve-picker-inline>
        </ve-form-item>
        <ve-form-item label="付款账号">
          <ve-picker-inline
            v-model="form.payAccountId"
            placeholder="请选择"
            :disabled="!form.payWay ? true : false"
            :range="accountList"
            unit="arrowRight"
          ></ve-picker-inline>
        </ve-form-item>
        <ve-form-item label="付款金额" unit="元" required>
          <ve-input-number :min="0" :max="99999999.99" :precision="2" disabled placeholder="请输入" v-model="form.amount" />
        </ve-form-item>
        <ve-form-item label="财务打款备注" labelPosition="top">
          <ve-input type="textarea" placeholder="请输入" v-model="form.payRemark" :maxlength="400" />
        </ve-form-item>
        <ve-form-item label="打款凭证（多图上传，支持上传jpg、png格式，最多上传10张）" labelPosition="top" :borderBottom="false">
          <ve-upload v-model="form.payFileIdList" max-count="10"></ve-upload>
        </ve-form-item>
      </ve-card>
    </ve-form>

    <view style="height: 280rpx">
      <ve-bottom-box>
        <view class="bottom-btns">
          <view class="amount"
            >付款金额：<text class="amount-num">{{ form.amount }}</text
            ><text class="amount-pic">元</text></view
          >
          <view class="line"></view>
          <ve-button type="primary" @click="formSubmit" :loading="loading" size="long">确认</ve-button>
        </view>
      </ve-bottom-box>
    </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import dayjs from 'dayjs'
  import { getCostDetailApi, payCostApi } from '@/api/cost/index'
  import { getAccountByPageDataAPI, getAccountByWayAndTypeAPI } from '@/api/order/lOrder'
  import FeeTable from './components/fee-table.vue'

  const datetimeparams = ref({
    year: true,
    month: true,
    day: true,
    hour: true,
    minute: true,
    second: true,
  })
  const rules = ref({
    payTime: {
      required: true,
      message: '请选择',
    },
    payWay: {
      required: true,
      message: '请选择',
    },
    actualAmount: {
      required: true,
      message: '请输入',
    },
    customerName: {
      required: true,
      message: '请输入',
    },
  })

  const receiveAmount = ref(0)

  const form = ref({})
  const collecBankInfo = ref('')
  const getDetail = async (id) => {
    const res = await getCostDetailApi({ id: id })
    if (res.code != 200) return
    const result = res.result
    form.value = result
    collecBankInfo.value = `${form.value.collectBackProvinceName} | ${form.value.collectBackCityName}`
    form.value.payTime = dayjs().format('YYYY-MM-DD HH:mm:00')
    form.value.customerName =
      form.value.collectType == '1'
        ? form.value.collectStaffName
        : form.value.collectType == '2'
        ? form.value.collectIndustryName
        : form.value.collectSupplierName
    getPaymentType()
  }

  // 收付款类型（方式）
  const paywayEnum = ref(null) //收付款方式
  const getPaymentType = () => {
    const param = { type: 1 }
    getAccountByPageDataAPI(param).then((res) => {
      var newarr = []
      var data = res.result
      data.forEach((i, index) => {
        // 付款方式中的枚举需要过滤网络平台代收、网络平台待付、微信线上支付、押金抵扣、预授权
        if (i.way != '1' && i.way != '2' && i.way != '3' && i.way != '4' && i.way != '5') {
          newarr.push(i)
        }
        if (data.length == index + 1) {
          var children = newarr.map((childItem) => {
            return {
              value: childItem.way,
              label: childItem.wayStr,
              type: childItem.type,
            }
          })
          paywayEnum.value = children
        }
      })
      if (form.value.payWay) {
        typeChange(form.value.payWay)
      }
    })
  }

  // 账号列表
  const accountList = ref(null)
  const typeChange = (value) => {
    form.value.payAccountId = ''
    paywayEnum.value.forEach((el) => {
      if (el.value == value) {
        getAccountByWayAndTypeAPI({ way: Number(el.value), type: 1 }).then((res) => {
          var children = res.result.map((childItem) => {
            return {
              value: childItem.id,
              label: childItem.account + '_' + childItem.bank,
            }
          })
          accountList.value = children
        })
      }
    })
  }
  // 提交
  const veFormRef = ref()
  const loading = ref(false)
  const formSubmit = () => {
    veFormRef.value.validate(async (valid) => {
      if (valid) {
        loading.value = true
        let params = {
          id: form.value.id,
          payTime: form.value.payTime,
          payWay: form.value.payWay,
          payAccountId: form.value.payAccountId,
          payFileIdList: form.value.payFileIdList,
          payRemark: form.value.payRemark,
        }
        payCostApi(params).then((res) => {
            uni.showToast({
              icon: 'none',
              title: res.message,
            })
            if (res.code == 200) {
              setTimeout(() => {
                uni.$emit('refreshData')
                uni.navigateBack()
              }, 500)
            }
          })
          .finally(() => {
            loading.value = false
          })
      } else {
        loading.value = false
        uni.pageScrollTo({
          duration: 100,
          scrollTop: 900000,
        })
      }
    })
  }
  onLoad((options) => {
    let id = options.id
    getDetail(id)
  })
</script>

<style lang="less" scoped>
  .container {
    padding: 24rpx;
  }
  .status-2 {
    background: #e8f7ff;
    color: #3491fa;
    border: 2rpx solid #3491fa;
    border-radius: 450rpx;
    padding: 0 16rpx;
    height: 40rpx;
    line-height: 40rpx;
    font-size: 24rpx;
    margin-right: 10rpx;
    margin-left: 10rpx;
  }
  .status-3 {
    background: #fff7e8;
    color: #ff7d00;
    border: 2rpx solid #ff7d00;
    border-radius: 450rpx;
    padding: 0 16rpx;
    height: 40rpx;
    line-height: 40rpx;
    font-size: 24rpx;
    margin-right: 10rpx;
  }
  .line {
    width: 100%;
    background: #d8d8d8;
    height: 1rpx;
  }

  .fee-item {
    overflow-x: scroll;
    margin-top: 24rpx;
    .fee-table {
      width: 800rpx;
      .tlt {
        width: 100%;
        height: 88rpx;
        background: #f7f8fa;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #8491a8;
        font-size: 24rpx;
        view:nth-child(1) {
          width: 320rpx;
          margin-left: 24rpx;
        }
        view:nth-child(2) {
          width: 160rpx;
        }
        view:nth-child(3) {
          width: 320rpx;
        }
      }
      .fee-first {
        width: 100%;
        margin: 32rpx 0 16rpx;
        background: #ffffff;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #191c27;
        font-size: 28rpx;
        view:nth-child(1) {
          width: 320rpx;
          margin-left: 24rpx;
        }
        view:nth-child(2) {
          width: 160rpx;
        }
        view:nth-child(3) {
          width: 320rpx;
        }
      }
      .fee-other {
        margin-left: 22rpx;
        .twice {
          width: calc(100% - 20rpx);
          background: #f7f8fa;
          padding: 0 24rpx 24rpx;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          color: #191c27;
          font-size: 28rpx;
          view {
            margin-top: 24rpx;
          }
          view:nth-child(1) {
            width: 296rpx;
            margin-left: 24rpx;
          }
          view:nth-child(2) {
            width: 160rpx;
          }
          view:nth-child(3) {
            width: 320rpx;
          }
        }
        .third {
          width: calc(100% - 20rpx);
          background: #f7f8fa;
          padding: 0 24rpx 24rpx;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          color: #191c27;
          font-size: 28rpx;
          view:nth-child(1) {
            width: 248rpx;
            margin-left: 48rpx;
          }
          view:nth-child(2) {
            width: 160rpx;
          }
          view:nth-child(3) {
            width: 320rpx;
          }
        }
      }
    }
  }
  .bottom-btns {
    width: 100%;
    display: flex;
    flex-direction: column;
    .amount {
      color: #1e1e1e;
      font-size: 32rpx;
      font-weight: 400;
      display: flex;
      justify-content: flex-start;
      align-items: flex-end;
      margin: 12rpx 0 36rpx;
      .amount-num {
        color: #fe615a;
        font-size: 48rpx;
        font-weight: 600;
        line-height: 1;
      }
      .amount-pic {
        color: #fe615a;
        font-size: 24rpx;
        font-weight: 400;
        margin-left: 8rpx;
      }
    }
    .line {
      width: 100%;
      background: rgba(216, 216, 216, 0.3);
      height: 1px;
      margin-bottom: 32rpx;
    }
  }
  :deep(.ve_tooltip__popper) {
    width: 420rpx;
    line-height: 38rpx;
    white-space: normal;
  }
</style>
